<template>
  <div>
    <C1 ref="C1" />
    <C2 ref="C2" />
    <!-- 下单成功支付框 -->
    <PayBox ref="payBox" :noBackBtn="true" />

    <Card class="marginB10">
      <div class="overflowH f_14 TJ_big">
        <div class="TJ_title f_bold f_16">
          作品信息
          <span class="cRed">*</span>
        </div>
        <div class="TJ_box">
          <div class="cRed marginB20 visHidden">x</div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">作品名称：</div>
            <div class="overflowH">
              <Input
                placeholder="请输入作品名称"
                size="large"
                v-model="works_name"
                ref="works_name"
                clearable
                class="marginR10 SQ_One_R"
              />
              <span class="cCCC">全部文件中的名称应填写一致，如有英文在括号内标注。例：作品名称（Name）</span>
            </div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">作者姓名或名称：</div>
            <div class="overflowH">
              <Input
                placeholder="请输入作者姓名或名称"
                size="large"
                v-model="author_name"
                ref="author_name"
                clearable
                class="marginR10 SQ_One_R"
              />
            </div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">作品署名：</div>
            <div class="overflowH lineH34 cBlue f_bold">本名</div>
          </div>

          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">创作完成日期：</div>
            <div class="overflowH">
              <DatePicker
                v-model="finish_time"
                type="date"
                class="marginR10 SQ_One_R"
                placeholder="请选择创作完成日期"
                style="width: 200px"
                size="large"
                :editable="false"
                :clearable="false"
                :options="optMax"
              ></DatePicker>
            </div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">创作完成地点：</div>
            <div class="overflowH lineH34">
              国家：
              <span class="cBlue f_bold marginR20">{{country.text}}</span>
              城市：
              <Input
                placeholder="请输入城市"
                size="large"
                v-model="city"
                ref="city"
                clearable
                class="marginR5"
                style="width:150px"
              />
            </div>
          </div>

          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">作品类别：</div>
            <div class="overflowH lineH34 cBlue f_bold">美术</div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">作品原创性质：</div>
            <div class="overflowH lineH34 cBlue f_bold">原创</div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">发表状态：</div>
            <div class="overflowH lineH30">
              <RadioGroup v-model="publish_state" size="large">
                <Radio :label="0">未发表</Radio>
                <Radio :label="1">已发表</Radio>
              </RadioGroup>
            </div>
          </div>
          <div class="marginB20 clearBoth" v-show="publish_state==1">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">首次发表日期：</div>
            <div class="overflowH">
              <DatePicker
                v-model="publish_time"
                type="date"
                class="marginR10 SQ_One_R"
                placeholder="请选择首次发表日期"
                style="width: 200px"
                size="large"
                :editable="false"
                :clearable="false"
                :options="optMax"
              ></DatePicker>
            </div>
          </div>
          <div class="marginB20 clearBoth" v-show="publish_state==1">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">首次发表地点：</div>
            <div class="overflowH lineH34">
              国家：
              <span class="cBlue f_bold marginR20">{{publish_country.text}}</span>
              城市：
              <Input
                placeholder="请输入城市"
                size="large"
                v-model="publish_city"
                ref="publish_city"
                clearable
                class="marginR5"
                style="width:150px"
              />
            </div>
          </div>
        </div>
      </div>
    </Card>

    <Card class="marginB10">
      <div class="overflowH f_14 TJ_big">
        <div class="TJ_title f_bold f_16">
          权利说明
          <span class="cRed">*</span>
        </div>
        <div class="TJ_box">
          <div class="cRed marginB20 visHidden">x</div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">取得方式：</div>
            <div class="overflowH lineH34 cBlue f_bold">原始</div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L c333 f_14 w150 pullLeft">
              权利归属方式
              <br />及其说明:
            </div>
            <div class="overflowH lineH34">
              <RadioGroup v-model="right_gs_desc" size="large">
                <Radio :label="1">个人作品</Radio>
                <Radio :label="2">合作作品</Radio>
                <Radio :label="3">法人作品</Radio>
              </RadioGroup>
              <span class="cCCC relative" style="top:3px;">（申请人为自然人选个人作品，企业选法人作品）</span>
            </div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L c333 f_14 w150 pullLeft">
              权利拥有状况
              <br />及其说明:
            </div>
            <div class="overflowH lineH34 cBlue f_bold">全部</div>
          </div>
        </div>
      </div>
    </Card>

    <Card class="marginB10">
      <div class="overflowH f_14 TJ_big">
        <div class="TJ_title f_bold f_16">
          其他信息
          <span class="cRed">*</span>
        </div>
        <div class="TJ_box">
          <div class="cRed marginB20">提示：以下无需上传已盖章/签字的文件，下单后待审核通过再快递纸质原件</div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">作品图样：</div>
            <div class="overflowH">
              <div class="textCenter pullLeft marginR20" style="width:140px;height:140px;">
                <div
                  class="JC_img tran3 pointer inlineBlock relative cBlue width100 height100 marginB10"
                >
                  <input
                    type="file"
                    ref="fimg"
                    class="InputFileBox"
                    accept="image/*"
                    @change="wtYY($event)"
                  />
                  <Icon
                    type="ios-add-circle-outline"
                    class="marginB5"
                    style="padding-top:40px;"
                    size="40"
                  />
                  <div class="f_12">上传图片</div>
                  <img
                    :src="works_file_path.file_url"
                    v-show="$app.judgeData(works_file_path.file_url)"
                    class="InputShowImg cover"
                  />
                </div>
              </div>
              <Button
                class="marginB20"
                v-show="$app.judgeData(works_file_path.file_url)"
                type="primary"
                ghost
                size="small"
                @click="$app.openWindow(works_file_path.file_url)"
              >查看图片</Button>
            </div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">说明文档：</div>
            <div class="overflowH">
              <div class="relative overflowH pullLeft marginR10" style="width:95px;">
                <Button type="primary">上传 Word</Button>
                <input
                  type="file"
                  ref="wj"
                  class="InputFileBox"
                  accept=".docx, .doc"
                  @change="wordUp($event)"
                />
              </div>
              <div
                class="pullLeft marginR20 relative textLink"
                style="top:-6px;"
                v-show="$app.judgeData(desc_word_file_path.file_url)"
                @click="$app.openWindow(desc_word_file_path.file_url)"
              >
                <i
                  class="iconfont f_24 cBlue marginR5 relative"
                  :class="$app.judgeData(desc_word_file_path) && $app.fileIcon(desc_word_file_path)"
                  style="top:4px;"
                ></i>
                {{wordText}}
              </div>
              <Button type="primary" ghost @click="$app.openWindow('static/word/作品说明书.docx')">下载</Button>
              <div class="clearBoth marginT10 c999">
                作品说明书 分三段进行描述：
                <br />（1）创作目的（为什么创作该作品）；
                <br />（2）创作过程（该作品从无到有的具体产生过程，包括如何构思、创作时间、创作中采用了哪些工具或电脑软件等具体创作过程）；
                <br />（3）独创性声明（该作品由作者独立创作完成，且不存在抄袭、复制他人作品的情形）。
              </div>
            </div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">代理委托书：</div>
            <div class="overflowH">
              <Button type="primary" @click="gwerN(1)">下载</Button>
            </div>
          </div>
          <div class="marginB20 clearBoth" v-show="right_gs_desc!=1">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">作品权属证明：</div>
            <div class="overflowH">
              <Button type="primary" @click="gwerN(2)">下载</Button>
            </div>
          </div>
          <div class="marginB20 clearBoth">
            <div class="SQ_One_L lineH34 c333 f_14 w150 pullLeft">纸介质：</div>
            <div class="overflowH cBlue f_bold lineH34">A4(打印纸)共1张</div>
          </div>
        </div>
      </div>
    </Card>
    <template v-if="$app.judgeData(order_id)">
      <Button type="primary" size="large" class="marginR10" ghost @click="backOrSee">
        <Icon type="md-arrow-round-back" size="18" class="relative"/>返回
      </Button>
    </template>

    <template v-if="$app.judgeData(bz_id)">
      <Button type="primary" size="large" @click="bigGo">提交补正</Button>
    </template>
    <template v-else>
      <Button type="primary" size="large" @click="bigGo">{{$app.judgeData(order_id)?'确认修改':'提 交'}}</Button>
    </template>
  </div>
</template>


<script>
import C1 from "./common/c1";
import C2 from "./common/c2";
import PayBox from "@$@/_service/payBox";
export default {
  name: "copyrightDoMS",
  components: { C1, C2, PayBox },
  data() {
    let {
      $route: {
        query: { order_id, id: bz_id }
      }
    } = this;

    let data = {
      bz_id, //补正时候的id
      order_id: $app.judgeData(order_id) ? order_id : "", //订单ID
      works_name: "",
      author_name: "",

      //创作完成地点
      finish_time: "",
      country: {
        type: "CN",
        text: "中国"
      },
      city: "",

      //首次发布
      publish_time: "",
      publish_country: {
        type: "CN",
        text: "中国"
      },
      publish_city: "",

      publish_state: 0, //发表状态,0未发表,1已发表
      right_gs_desc: 1, //权利归属方式及其说明

      //作品样图,jpg格式
      works_file_path: {
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      },

      //作品说明文档
      desc_word_file_path: {
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      },
      wordText: "",

      optMax: {
        disabledDate(date) {
          let out = date && date.valueOf() > Date.now();
          return out;
        }
      },
      orderInfo: {} //专利详情 修改订单时用
    };
    return data;
  },

  mounted() {
    //
  },
  created() {
    let { order_id } = this;
    if ($app.judgeData(order_id)) {
      //版权详情
      $ajax.copyrightII(order_id, resData => {
        this.orderInfo = resData;
        //全局赋值
        $app.wetRK(this);
      });
    }
  },

  methods: {
    //图片上传
    wtYY(e) {
      let file = e.target.files[0]; //选中的文件

      //格式判断
      $app.suffix.jpgPng(e, file,false, () => {
        //1营业执照，2专利文件or委托书，3身份证,4外观设计图片,5外观说明文件,6软著文件,7美术著作文件,8商标文件
        $app.selectFileImage(null,null,file,7,resData => {
            this.works_file_path = resData;
            this.$refs["fimg"].value = ""; //清空input file的值
          },
          () => {
            this.$refs["fimg"].value = ""; //清空input file的值
          }
        );
      });
    },
    //上传wrod
    wordUp(e) {
      let file = e.target.files[0]; //选中的文件

      //格式判断
      $app.suffix.word(e, file,false, () => {
        //1营业执照，2专利文件or委托书，3身份证,4外观设计图片,5外观说明文件,6软著文件,7美术著作文件,8商标文件
        $ajax.upOther(file,7,(resData, file_name) => {
            this.desc_word_file_path = resData;
            this.wordText = file_name;
            this.$refs["wj"].value = ""; //清空input file的值
          },
          () => {
            this.$refs["wj"].value = ""; //清空input file的值
          }
        );
      });
    },

    //代理委托书
    gwerN(who) {
      let { people_name } = this.$refs["C1"];

      let { works_name } = this;

      if (!$app.judgeData(people_name)) {
        this.$Message.error({ content: "请输入申请人单位名称" });
        this.$refs["C1"].$refs["people_name"].focus();
      } else if (!$app.judgeData(works_name)) {
        this.$Message.error({ content: "请输入作品名称" });
        this.$refs["works_name"].focus();
      } else {
        $ajax.workAC(who, people_name, works_name, resData => {
          $app.openWindow(resData.file_url);
        });
      }
    },

    //准备就绪，提交
    bigGo() {
      let that = this;
      let { bz_id, order_id } = that;

      //C1 基础信息取值
      let {
        goods_id, //商品ID 路由取值
        people_type,
        people_country,
        addObj: { people_province, people_city },
        people_name,
        cert_type,
        cert_number,
        cert_file_path: { file_path: cert_file_path }
      } = that.$refs["C1"];

      //总共9个
      //console.log('C1 = ',goods_id,people_type,people_country,people_province,people_city,people_name,cert_type,cert_number,cert_file_path);

      //C2 联系方式
      let {
        reg_people_name,
        reg_people_contact,
        reg_people_phone,
        reg_people_tel,
        reg_people_email,
        reg_people_address
      } = that.$refs["C2"];

      //总共6个
      //console.log('C2 = ',reg_people_name,reg_people_contact,reg_people_phone,reg_people_tel,reg_people_email,reg_people_address);

      //本页面取值的key
      let {
        works_name,
        author_name,
        works_file_path: { file_path: works_file_path },
        finish_time,
        country: { type: country },
        city,
        publish_state, //0未发表,1已发表,
        publish_time,
        publish_country: { type: publish_country },
        publish_city,

        //权利归属方式 1个人作品/2合作作品/3法人作品
        right_gs_desc: right_Xu,
        desc_word_file_path: { file_path: desc_word_file_path }
      } = this;

      //创作完成时间，时间戳转换
      let fTime = finish_time.valueOf() / 1000;
      $app.judgeData(fTime) && (finish_time = $app.formatTime(2, fTime));

      if (publish_state == 1) {
        let pTime = publish_time.valueOf() / 1000;
        $app.judgeData(pTime) && (publish_time = $app.formatTime(2, pTime));
      } else {
        publish_time = "";
        publish_country = "";
        publish_city = "";
      }

      //权利归属方式 转成中文
      let right_gs_desc = "";
      switch (parseInt(right_Xu)) {
        case 1:
          right_gs_desc = "个人作品";
          break;
        case 2:
          right_gs_desc = "合作作品";
          break;
        case 3:
          right_gs_desc = "法人作品";
          break;
      }

      //共12项
      // console.log('本页面key = ',works_name,author_name,works_file_path,finish_time,country,city,publish_state,publish_time,publish_country,publish_city,right_gs_desc,desc_word_file_path)

      let obj = {
        bz_id,
        order_id,
        //C1
        goods_id,
        people_type,
        people_country,
        people_province,
        people_city,
        people_name,
        cert_type,
        cert_number,
        cert_file_path,

        //C2
        reg_people_name,
        reg_people_contact,
        reg_people_phone,
        reg_people_tel,
        reg_people_email,
        reg_people_address,

        //本页面key
        works_name,
        author_name,
        works_file_path,
        finish_time,
        country,
        city,
        publish_state,
        publish_time,
        publish_country,
        publish_city,
        right_gs_desc,
        desc_word_file_path,

        //以下为固定值 共6个
        works_type: "美术",
        works_nature: "原创",
        signature: "本名",
        paper_medium: "A4(打印纸)共1张",
        get_way: "原始",
        right_has_desc: "全部"
      };

      console.log(obj);

      //基础信息+联系方式，正则判断，其中有一个为false，就会断开不往下走。
      $app.banQbase(that, obj, () => {
        // 作品信息 判断
        if (!$app.judgeData($app.delSpace(obj.works_name))) {
          that.$Message.error({ content: "作品名称，不能为空" });
          that.$refs["works_name"].focus();
          that.works_name = "";
          return;
        }

        if (!$app.judgeData($app.delSpace(obj.author_name))) {
          that.$Message.error({ content: "作者姓名或名称，不能为空" });
          that.$refs["author_name"].focus();
          that.author_name = "";
          return;
        }

        if (!$app.judgeData($app.delSpace(obj.finish_time))) {
          $app.alert("作品创作完成日期，不能为空");
          return;
        }

        if (!$app.judgeData($app.delSpace(obj.city))) {
          that.$Message.error({ content: "作品创作完成地点，不能为空" });
          that.$refs["city"].focus();
          that.city = "";
          return;
        }

        if (obj.publish_state == 1) {
          //0未发表 1已发表
          if (!$app.judgeData($app.delSpace(obj.publish_time))) {
            $app.alert("作品首次发表日期，不能为空");
            return;
          }

          if (!$app.judgeData($app.delSpace(obj.publish_city))) {
            that.$Message.error({ content: "作品首次发表城市，不能为空" });
            that.$refs["publish_city"].focus();
            that.publish_city = "";
            return;
          }
        }

        // 其他信息
        if (!$app.judgeData($app.delSpace(obj.works_file_path))) {
          $app.alert("请上传作品图样");
          return;
        }
        if (!$app.judgeData($app.delSpace(obj.desc_word_file_path))) {
          $app.alert("请上传说明文档");
          return;
        }

        $ajax.copyrightMS(obj, resData => {
          if ($app.judgeData(order_id) || $app.judgeData(bz_id)) {
            //有值 修改订单
            $app.toast($app.judgeData(bz_id) ? "提交成功" : "订单修改成功", true);
            $app.backOrSee();
          } else {
            //没值 首次提交
            $app.payBoxShow(that, resData.order_id); //调起支付框
          }
        });

      });

      
    },
    //返回上一级
    backOrSee() {
      $app.backOrSee();
    }
  }
};
</script>

